<template>
	<div class="categorytab2">
		<div class="catab2">
			<img src="imgs/tab2-4.webp" />
			<p>{{tabs2List[0].title}}——<label>{{tabs2List[0].msg}}</label><em>￥{{tabs2List[0].price}}</em></p>
		</div>
		
		<div class="catab3 swiper">
			<ul class="swiper-wrapper">
				<template  v-for="item in tabs2List">
					<li class="swiper-slide" :key="item.id" v-if="item.id!=1">
						<div class="tou">
							<p>{{item.city}}</p>
							<img :src="item.imgURL" />
						</div>
						<aside>
							<h3>{{item.title}}</h3>
							<label>{{item.msg}}</label>
							<div>￥{{item.price}}</div>
						</aside>
					</li>
				</template>
			</ul>
		</div>
		<div class="jz2">
			<router-link to="/">
				加载更多➡
			</router-link>
		</div>
	</div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);
	
	
export default{
	name:'Categorytab2',
	data(){
		return{
			tabs2List : [
				{id:1,imgURL:'imgs/tab2-4.webp',title:'长隆野生动物世界',msg:'《爸爸去哪儿》拍摄地',city:'广州出发',price:286},
				{id:2,imgURL:'imgs/tab2-1.jpg',title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
				{id:3,imgURL:'imgs/tab2-2.jpg',title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
				{id:4,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				{id:5,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				{id:6,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				{id:7,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				{id:8,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				{id:9,imgURL:'imgs/tab2-3.jpg',title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
				
			]
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.catab3' , {
				//循环播放
				slidesPerView : 3
			} )
		} )
	}
}
</script>

<style>
.categorytab2{
	margin-top: 0.2rem;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
	height: 8rem;
	width: 100%;
}
.categorytab2 .catab2{
	background-color: #E6C81A;
	width: 100%;
	height: 4rem;
	position: relative;
}
.categorytab2 .catab2 img{
	width: 100%;
	height: 100%;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}
.categorytab2 .catab2 p{
	position: absolute;
	top: 3.3rem;
	background-color: rgba(11,50,26,0.8);
	color: white;
	line-height: 0.7rem;
	width: 100%;
	text-indent: 0.5em;
	font-size: 0.3rem;
}
.categorytab2 .catab2 p em{
	float: right;
	margin-right: 0.2rem;
	color: #f67a39;
	font-size: 0.3rem;
	font-weight: bold;
}
.categorytab2 .catab3{
	margin-top: 0.2rem;
	height: 3.6rem;
	width: 100%;
}
.categorytab2 .catab3 ul li{
	width: 32.7%;
	float: left;
	height: 4rem;
	position: relative;
	
}
.categorytab2 .catab3 ul li .tou{
	position: relative;
	width: 94%;
	margin: 0 auto;
}
.categorytab2 .catab3 ul li img{
	width: 100%;
	border-radius: 0.3rem;
	height: 2.4rem;
	display: block;
	margin: 0 auto;
}
.categorytab2 .catab3 ul li .tou p{
	position: absolute;
	z-index: 999;
	width: 1.8rem;
	line-height: 0.5rem;
	text-align: center;
	background-color: rgba(51,50,56,0.9);
	color: white;
	border-top-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}
.categorytab2 .catab3 ul li aside{
	line-height: 0.4rem;
	text-indent: 0.8em;
	margin-top: 0.09rem;
}
.categorytab2 .catab3 ul li aside label{
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: gray;
}
.categorytab2 .catab3 ul li aside h3{
	font-weight: bold;
	font-size: 0.35rem;
}
.categorytab2 .catab3 ul li aside div{
	color: #ff8d56;
	font-weight: bold;
}

.jz2{
	line-height: 1.2rem;
	text-align: center;
}
.jz2 a{
	margin-top: 0.2rem;
	display: block;
	width: 100%;
	border-radius: 0.4rem;
	border: 1px solid #dddddd;
	line-height: 0.8rem;
	background-color: #ffffff;
	text-decoration: none;
	color: #000000;
}
</style>
